//-------------------------------------------------------------
import React, { useState, useEffect } from 'react';
//-------------------------------------------------------------
import bridge from '@vkontakte/vk-bridge';
import { View, Panel, PanelHeader, Tabbar, TabbarItem, Group, Cell,Spacing} from '@vkontakte/vkui';
import { Icon28UserCircleOutline, Icon28WaterDropOutline, Icon28NewsfeedLinesOutline, Icon28LikeOutline, Icon28AddCircleFillBlue } from '@vkontakte/icons';
//-------------------------------------------------------------
import ProfilePanel from './Components/ProfilePanel';
import ExampleCardGrid from './Components/CardGrid';
import LastDate from './Components/LastDate';
import CalendarComp from './Components/Calendar';
import AddMed from './Components/addMed';
import LineChartGlykoz from './Components/LineCharMainGlykoz';

//-------------------------------------------------------------
import './App.css';
//-------------------------------------------------------------
const App = () => {
  const [activePanel] = useState('main');
  const [activeTab, setActiveTab] = useState('main');

  useEffect(() => {
    async function fetchData() {
      try {
        await bridge.send('VKWebAppInit');
      } catch (error) {
        console.error('Ошибка инициализации VK Mini App:', error);
      }
    }
    fetchData();
  }, []);
  //-------------------------------------------------------------
  const renderMain = () => (
    <Group>
      <Panel id="main">
        <PanelHeader style={{ textAlign: 'center' }}>Главная</PanelHeader>
        <Spacing />
        <CalendarComp>
        </CalendarComp>
        <LastDate />
        <Spacing size={12} />
        <ExampleCardGrid />
        <div className='empty_div' style={{width:'100%', height:'45px'}} />
      </Panel>
    </Group>
  );
  //-------------------------------------------------------------
  const renderProfile = () => (
    <View activePanel="profile">
      <ProfilePanel id="profile" />
      
    </View>
  );
  //-------------------------------------------------------------
  const renderPressure = () => (
    <Group>
      <Panel id="pressure">
        <PanelHeader style={{ textAlign: 'center' }}>Давление</PanelHeader>
        <Cell>Здесь будет содержимое Давление.</Cell>
      </Panel>
    </Group>
  );
  //-------------------------------------------------------------
  const renderGlukoz = () => (
    <Group>
      <Panel id="glukoz">
        <PanelHeader style={{ textAlign: 'center' }}>Глюкоза</PanelHeader>
        <Cell>Здесь будет содержимое Глюкозы.</Cell>
        
      </Panel>
    </Group>
  );
  const renderAdd_med = () => (
    <Group>
      <Panel id="add_med">
        <PanelHeader style={{ textAlign: 'center' }}>Добавить медикаменты</PanelHeader>
        <AddMed />
      </Panel>
    </Group>
  );
  //-------------------------------------------------------------
  return (
    <View activePanel={activePanel}>
      <Panel id="main">
        {activeTab === 'main' && renderMain()}
        {activeTab === 'glukoz' && renderGlukoz()}
        {activeTab === 'pressure' && renderPressure()}
        {activeTab === 'add_med' && renderAdd_med()}
        {activeTab === 'profile' && renderProfile()}
        <Tabbar>
          
          <TabbarItem onClick={() => setActiveTab('main')} selected={activeTab === 'main'} text="Главная">
              <Icon28NewsfeedLinesOutline />
          </TabbarItem>
        
          <TabbarItem onClick={() => setActiveTab('glukoz')} selected={activeTab === 'glukoz'} text="Глюкоза">
            <Icon28WaterDropOutline />
          </TabbarItem>

          <TabbarItem onClick={() => setActiveTab('add_med')} selected={activeTab === 'add_med'}
          text="Добавить">
          <Icon28AddCircleFillBlue />
          </TabbarItem>

          <TabbarItem onClick={() => setActiveTab('pressure')} selected={activeTab === 'pressure'} text="Давление">
            <Icon28LikeOutline />
          </TabbarItem>

          <TabbarItem onClick={() => setActiveTab('profile')} selected={activeTab === 'profile'} text="Профиль">
            <Icon28UserCircleOutline />
          </TabbarItem>

        </Tabbar>
      </Panel>
    </View>
  );
};
//-------------------------------------------------------------
export default App;
